<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>统计</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" th:href="@{/bullet/dist/osc-bullet.min.css}">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html, body {
			height: 100%;
		}
		.btn {
			outline: 0;
			border: 0;
			appearance: none;
			padding: 4px 12px;
			border-radius: 4px;
			color: #fff;
			font-size: 14px;
			background: #06AD3D;
			cursor: pointer;
			text-decoration: none;
		}
		.btn:hover {
			background: #05892f;
		}
	</style>
</head>
<body>
<div class="layui-footer">
	<fieldset class="layui-elem-field layui-field-title">
		<!--<legend>springboot-auth @相关信息</legend>-->
	</fieldset>
	<div style="float: right;">
		<div class="layui-form-item">
			<div class="layui-input-inline" style="width: 80px;">
				<button class="btn btn-clear">清空弹幕</button>
			</div>
			<div class="layui-input-inline" style="width: 80px;">
				<a href="https://gitee.com/zhumaochao/springboot-auth" title="作者码云项目" target="_blank">
					<img src="https://gitee.com/logo-black.svg?20171024" height="18" width="95">
				</a>
			</div>
			<div class="layui-input-inline" style="width: 50px;">
				<a href="https://my.oschina.net/u/3204029" title="作者博客" target="_blank">
					<i class="layui-icon layui-icon-login-weibo">博文</i>
				</a>
			</div>
			<div class="layui-input-inline" style="width: 100px;">
				<div class="layui-input-inline" style="width: 100px;">
					<a target="_blank"
					   href="//shang.qq.com/wpa/qunwpa?idkey=38022f37691fdccda7d38fcd3b6f382d62af0d3d070ac5823ee962896de405fd"><img
							border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="springboot-auth交流群"
							title="springboot-auth交流群"></a>
				</div>
			</div>
		</div>
	</div>
</div>


<script th:src="@{/bullet/dist/osc-bullet.min.js}"></script>
<script type="text/javascript">
	$(function () {
		var bulletColorArr = ["#06ad3d", "#55cb44", "#3498db", "#f46825", "#e74c3c", "#e15fd8", "#95a5a6", "#f39c12", "#6c51f3", "#f562d8"];
		var bulletContentArr = ['如果对你有帮助，麻烦给作者点个赞哦！', 'OSCHINA.NET 是目前领先的中文开源技术社区', '我们传播开源的理念，推广开源项目',
			'开源中国社区OSCHINA','开源中国社区为IT开发者提供了一个发现、使用、交流开源技术的平台','码云Gitee云端软件开发协作平台','博主没钱买云服务器','请作者喝杯咖啡','赞助作者买云服务器'];
		var bulletImageArr = ["../public/image/personnel.png", "../public/image/portrait.png", "../public/image/normal_group_live_guide.png",
			"../public/image/emotion_032.png", "../public/image/emotion_034.png", "../public/image/emotion_035.png",
			"../public/image/emotion_111.png", "../public/image/emotion_114.png", "../public/image/emotion_033.png"];
		var bulletContainer = $('body');
		var bulletTimer = null;
		function addNext () {
			var content = bulletContentArr[Math.floor((Math.random() * bulletContentArr.length))];
			if (content) {
				var bgColor = bulletColorArr[Math.floor((Math.random() * bulletColorArr.length))] || bulletColorArr[0];
				var bgImage = bulletImageArr[Math.floor((Math.random() * bulletImageArr.length))] || bulletImageArr[0];
				bulletContainer.bullet({
					avatar: bgImage,
					content: content,
					url: 'https://gitee.com/zhumaochao/springboot-auth-up',
					color: '',
					bgColor: bgColor,
					speed: 20,
					safeTop: 150,
					safeBottom: 20,
					hasClose: true
				});
			}
			bulletTimer = setTimeout(addNext, 1500);
		}
		addNext();

		// clear
		$('.btn-clear').on('click', function () {
			bulletContainer.bullet.clear();

			if (bulletTimer) {
				clearTimeout(bulletTimer);
				bulletTimer = null;
			}
		});
	});
</script>

</body>
</html>
